﻿<!DOCTYPE html>
<html>
<head>
    <title>2025蛇年新春祝福</title>
    <style>
        body {
            background: #ae0d0d;
            overflow: hidden;
            font-family: '楷体', cursive;
        }
        
        .container {
            position: relative;
            height: 100vh;
        }

        .snake {
            position: absolute;
            width: 300px;
            animation: slither 8s infinite linear;
        }

        .banner {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            color: #ffd700;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            text-align: center;
        }

        .firework {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ffd700;
            border-radius: 50%;
            animation: explode 1.5s infinite;
        }

        .message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1.8em;
            text-align: center;
            line-height: 1.5;
        }

        @keyframes slither {
            0% { left: -300px; top: 30% }
            50% { top: 35% }
            100% { left: 100%; top: 30% }
        }

        @keyframes explode {
            0% { transform: scale(1); opacity: 1 }
            100% { transform: scale(8); opacity: 0 }
        }

        .lantern {
            position: absolute;
            width: 80px;
            animation: swing 3s ease-in-out infinite;
        }

        @keyframes swing {
            0%,100% { transform: rotate(-10deg) }
            50% { transform: rotate(10deg) }
        }

        .signature {
            position: absolute;
            bottom: 20px;
            right: 30px;
            color: #fff;
            font-size: 1.2em;
            writing-mode: vertical-rl;
            letter-spacing: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="" 
             class="snake" alt="蛇图案">

        <div class="banner">
            🐉 甲辰蛇年 新春大吉 🐉
        </div>

        <div class="message" id="message">
            点击接收祝福 ▼
        </div>

        <div class="signature">冬颖 敬上</div>

        <div id="fireworks"></div>
    </div>

    <script>
        const messages = [
            "金蛇纳福，万事顺遂！",
            "灵蛇献瑞，福泽绵长！",
            "蛇舞新春，财源滚滚！",
            "岁岁平安，吉祥如意！",
            "心想事成，幸福安康！"
        ];

        document.getElementById('message').onclick = function() {
            // 随机祝福
            this.innerHTML = messages[Math.floor(Math.random()*messages.length)] + "<br>🎉🎊🍾";
            
            // 创建烟花效果
            for(let i=0; i<20; i++) {
                const firework = document.createElement('div');
                firework.className = 'firework';
                firework.style.left = Math.random()*100 + '%';
                firework.style.top = Math.random()*100 + '%';
                firework.style.animationDelay = Math.random()*1 + 's';
                document.getElementById('fireworks').appendChild(firework);
                
                setTimeout(() => {
                    firework.remove();
                }, 1500);
            }
        };

        // 自动生成灯笼
        function createLantern() {
            const lantern = document.createElement('img');
            lantern.className = 'lantern';
            lantern.src = '';
            lantern.style.left = Math.random()*95 + '%';
            lantern.style.top = Math.random()*80 + '%';
            document.body.appendChild(lantern);
        }

        // 生成8个灯笼
        for(let i=0; i<8; i++) {
            setTimeout(createLantern, i*200);
        }
    </script>
</body>
</html>